﻿<section class="section" id="loader">
  <header class="section-header row">
    <h1 class="section-title col-xs-24">
      <a href="#loader">Indeterminate Progress</a>
    </h1>
  </header>

  <div class="row">
    <div class="col-xs-24" >

      <h3>Progress Ring</h3>

      <p>
        <div class="progress-ring">
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
        </div>

        <div class="progress-ring progress-medium">
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
        </div>

        <div class="progress-ring progress-large">
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
          <div class="progress-circle"></div>
        </div>
      </p>

      {{#markdown}}
```xml
<div class="progress-ring">
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
</div>
```
      {{/markdown}}
    </div>

    <div class="col-md-24 m-b-sm">
      <div class="guidance guidance-usage m-t-xs">
        {{#markdown}}
{{> progress-ring-guidance.md}}
        {{/markdown}}
      </div>
    </div>

    <h3>Progress Bar</h3>

    <p>
      <div class="progress-bar">
        <div class="progress-circle"></div>
        <div class="progress-circle"></div>
        <div class="progress-circle"></div>
        <div class="progress-circle"></div>
        <div class="progress-circle"></div>
      </div>
    </p>

    {{#markdown}}
```xml
<div class="progress-bar">
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
  <div class="progress-circle"></div>
</div>
```
    {{/markdown}}

  </div>

</section>
